<template>
  <a-tooltip :placement="placement">
    <template slot="title">
      <slot />
    </template>
    <div class="data-text-ellipsis-wrap">
      <div class="data-text-ellipsis" :style="`max-width: ${maxWidth};`">
        <slot />
      </div>
    </div>
  </a-tooltip>
</template>

<script>
export default {
  name: 'DataTextEllipsis',
  props: {
    placement: { type: String, default: 'topLeft' },
    width: { type: Number | String, default: 300 },
  },
  data() {
    return {
    }
  },
  computed: {
    maxWidth() {
      const width = this.width;
      return typeof width === 'string' ? width : `${width}px`;
    }
  },
  methods: {}
}
</script>
<style scoped>
.data-text-ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
.data-text-ellipsis-wrap{
  display: inline-flex;
}
</style>